<template>
    <el-button type="primary" style="margin-bottom: 18px;" @click="AddField">添加字段</el-button>
    <el-table :data="tableData" border>
        <el-table-column prop="name" label="名" />
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="length" label="长度" />
        <el-table-column prop="decimalPoint" label="小数点" />
        <el-table-column prop="isNull" label="不是 null" />
        <el-table-column prop="virtual" label="虚拟" />
        <el-table-column prop="key" label="键" />
        <el-table-column prop="annotation" label="注释" />
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button link type="primary" size="small" @click="handleEditClick(row)">编辑</el-button>
                <el-button link type="danger" size="small" @click="handleDeleteClick(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="innerVisible" width="500px" :title="form.id ? '修改字段' : ' 添加字段'" append-to-body :close-on-click-modal="false">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="名" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择类型" filterable @change="changeType">
                    <el-option v-for="(item, index) in mysqlDataTypes" :key="index" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="长度">
                <el-input-number v-model="form.length" />
            </el-form-item>
            <el-form-item label="小数点">
                <el-input-number v-model="form.decimalPoint" />
            </el-form-item>
            <el-form-item label="不是 null">
                <el-radio-group v-model="form.isNull">
                    <el-radio label="是" value="1" />
                    <el-radio label="不是" value="0" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="虚拟">
                <el-radio-group v-model="form.virtual">
                    <el-radio label="是" value="1" />
                    <el-radio label="不是" value="0" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="键">
                <el-radio-group v-model="form.key">
                    <el-radio label="是" value="1" />
                    <el-radio label="不是" value="0" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="注释">
                <el-input v-model="form.annotation" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="resetField(formRef)">取消</el-button>
            <el-button type="primary" @click="savefield(formRef)">保存</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { ElMessageBox, ElMessage, } from "element-plus"
import { reactive, ref } from "vue"
import { useField } from '@/store/field.ts';
import { storeToRefs } from "pinia"
const useFieldStore = useField()
const { tableData } = storeToRefs(useFieldStore)
const innerVisible = ref(false)
interface RuleForm {
    id?: number | string
    name: string,
    type: string,
    length: number,
    decimalPoint: number,
    isNull: '0' | '1',
    virtual: '0' | '1',
    key: '0' | '1'
    annotation?: string
}
export interface TableField extends RuleForm {
    id: number | string
}
const formRef = ref<FormInstance>()

const form = ref<RuleForm>({
    name: '',
    type: '',
    length: 0,
    decimalPoint: 0,
    isNull: "0",
    virtual: "0",
    key: '0',
    annotation: ''
})
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入名', trigger: 'blur' },
        { min: 1, max: 50, message: '长度1-50字符', trigger: 'blur' },
    ],
    type: [{
        required: true,
        message: '请选择类型',
        trigger: 'change',
    },]
})
// 删除
const handleDeleteClick = (id: number | string) => {
    ElMessageBox.confirm('确定要删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        useFieldStore.delete(id)
    }).catch(() => {
        ElMessage.info('你取消了删除')
    })
}
// 保存
const savefield = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid: boolean) => {
        if (valid) {
            useFieldStore.set(form.value)
            formEl.resetFields()
            form.value = {
                name: '',
                type: '',
                length: 0,
                decimalPoint: 0,
                isNull: "0",
                virtual: "0",
                key: '0',
                annotation: ''
            }
            innerVisible.value = false
        } else {
            ElMessage.warning('添加失败')
        }
    })
}
// 取消
const resetField = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    innerVisible.value = false;
    form.value = {
        name: '',
        type: '',
        length: 0,
        decimalPoint: 0,
        isNull: "0",
        virtual: "0",
        key: '0',
        annotation: ''
    }
}
const AddField = () => {
    innerVisible.value = true
}
const handleEditClick = (row: RuleForm) => {
    form.value = { ...row }
    innerVisible.value = true
}
const changeType = (value: string) => {
    form.value.length = value == 'varchar' ? 255 : 0
}
const mysqlDataTypes = ref([
    // 整数类型
    { value: 'tinyint', label: 'tinyint' },
    { value: 'smallint', label: 'smallint' },
    { value: 'mediumint', label: 'mediumint' },
    { value: 'int', label: 'int' },
    { value: 'integer', label: 'integer' },
    { value: 'bigint', label: 'bigint' },

    // 浮点/小数类型
    { value: 'float', label: 'float' },
    { value: 'double', label: 'double' },
    { value: 'decimal', label: 'decimal' },

    // 字符串类型
    { value: 'char', label: 'char' },
    { value: 'varchar', label: 'varchar' },
    { value: 'tinytext', label: 'tinytext' },
    { value: 'text', label: 'text' },
    { value: 'mediumtext', label: 'mediumtext' },
    { value: 'longtext', label: 'longtext' },

    // 二进制类型
    { value: 'binary', label: 'binary' },
    { value: 'varbinary', label: 'varbinary' },
    { value: 'tinyblob', label: 'tinyblob' },
    { value: 'blob', label: 'blob' },
    { value: 'mediumblob', label: 'mediumblob' },
    { value: 'longblob', label: 'longblob' },

    // 日期时间类型
    { value: 'date', label: 'date' },
    { value: 'time', label: 'time' },
    { value: 'datetime', label: 'datetime' },
    { value: 'timestamp', label: 'timestamp' },
    { value: 'year', label: 'year' },

    // 枚举和集合类型
    { value: 'enum', label: 'enum' },
    { value: 'set', label: 'set' },

    // 其他类型
    { value: 'json', label: 'json' }
]);

</script>

<style lang="sass" scoped>

</style>